<template>
  <div style="display: inline-block;text-align: left;">
    <el-button type="primary" size="mini" @click="openEdit(row_id)">{{$t('table.edit')}}</el-button>
    <el-dialog :visible.sync="dialogTableVisible" v-if="dialogTableVisible" :title="$t('table.edit')" width="35%" top="3%" :before-close="closeDia">
      <el-form ref="formData" :model="formData" :rules="rules" label-position="right" size="small">
        <el-form-item :label="$t('equipment.device_id')" prop="sn">
          <el-input label="right" type="text" v-model="formData.sn" disabled></el-input>
        </el-form-item>
        <el-form-item :label="$t('equipment.device_name')" prop="device_name">
          <el-input label="right" type="text" v-model="formData.device_name"></el-input>
        </el-form-item>
        <el-form-item :label="$t('equipment.open_door_continue_time')" prop="open_door_continue_time">
          <el-input label="right" type="text" v-model="formData.open_door_continue_time" style="width:250px"></el-input>
          ms
        </el-form-item>
        <!-- <el-form-item :label="$t('equipment.camera_detect_type')" prop="camera_detect_type">
          <el-select v-model="formData.camera_detect_type">
            <el-option :label="$t('equipment.type_living')" :value="0"></el-option>
            <el-option :label="$t('equipment.type_no_living')" :value="1"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item :label="$t('equipment.face_feature_pair_number')" prop="face_feature_pair_number">
          <!-- <el-slider v-model="formData.face_feature_pair_number" :step="0.01" :max="1" show-input>
          </el-slider> -->
          <el-input-number v-model="formData.face_feature_pair_number" :disabled="is_lock" :min="0" :step="0.01" :max="1" size="small" />
          <el-button @click="openLockDia()" type="primary" size="mini">{{$t('equipment.unlock')}}</el-button>
        </el-form-item>
        <el-form-item :label="$t('equipment.begin_reco_distance')" prop="begin_reco_distance">
          <el-slider v-model="formData.begin_reco_distance" :marks="{0:$t('equipment.far'),300:$t('equipment.near')}" :step="1" :max="300" show-input style="width:400px;float:right">
          </el-slider>
        </el-form-item>
        <el-form-item :label="$t('equipment.device_music_size')" prop="device_music_size">
          <el-slider v-model="formData.device_music_size" :marks="{0:'0',100:'100'}" :step="1" :max="100" show-input style="width:400px;float:right">
          </el-slider>
        </el-form-item>
        <el-form-item :label="$t('equipment.mask_flag')" prop="mask_flag">
          <el-radio v-model="formData.mask_flag" :label="1">{{$t('equipment.on')}}</el-radio>
          <el-radio v-model="formData.mask_flag" :label="0">{{$t('equipment.off')}}</el-radio>
        </el-form-item>
        <el-form-item :label="$t('equipment.open_door_type')" prop="open_door_type">
          <el-select v-model="formData.open_door_type">
            <el-option v-for="(item,index) in open_door_option" :label="item.label" :value="item.value" :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('equipment.device_defend_time')" prop="device_defend_time">
          <el-time-picker v-model="formData.device_defend_time" value-format="HH:mm" format="HH : mm" align="right">
          </el-time-picker>
        </el-form-item>
        <el-form-item :label="$t('equipment.fill_light_times')">
          <el-time-picker style="width:250px" is-range value-format="HH:mm" format="HH : mm" v-model="fill_light_times" range-separator="-" start-placeholder="" end-placeholder="" placeholder="">
          </el-time-picker>
        </el-form-item>
        <el-form-item :label="$t('equipment.low_power_times')">
          <el-time-picker style="width:250px" is-range value-format="HH:mm" format="HH : mm" v-model="low_power_times" range-separator="-" start-placeholder="" end-placeholder="" placeholder="">
          </el-time-picker>
        </el-form-item>
        <el-form-item :label="$t('equipment.temperature_type')">
          <el-radio v-model="temp_display_type" :label="0">℃</el-radio>
          <el-radio v-model="temp_display_type" :label="1">℉</el-radio>
        </el-form-item>
        <el-form-item :label="$t('equipment.normal_temp')" prop="temp_range2">
          <el-input label="right" type="text" v-model="formData.temp_range3" style="width:100px"></el-input>
          <span v-if="temp_display_type == 0"> ℃ —</span>
          <span v-if="temp_display_type == 1"> ℉ —</span>
          <el-input label="right" type="text" v-model="formData.temp_range2" style="width:100px"></el-input>
          <span v-if="temp_display_type == 0"> ℃</span>
          <span v-if="temp_display_type == 1"> ℉</span>

        </el-form-item>
        <el-form-item :label="$t('equipment.low_temp')" prop="temp_range3">
          <el-input label="right" type="text" v-model="formData.temp_range1" style="width:100px"></el-input>
          <span v-if="temp_display_type == 0"> ℃</span>
          <span v-if="temp_display_type == 1"> ℉</span>
        </el-form-item>
        <h3>{{$t('equipment.device_ip_setting')}}</h3>
        <el-form-item :label="$t('equipment.device_ip_setting')" required>
          <el-radio v-model="formData.autogetip" :label="1">{{$t('equipment.dhcp_ip')}}</el-radio>
          <el-radio v-model="formData.autogetip" :label="0">{{$t('equipment.static_ip')}}</el-radio>
        </el-form-item>
        <el-form-item :label="$t('equipment.server_ip')" prop="server_ip">
          <el-input label="right" type="text" v-model="formData.server_ip"></el-input>
        </el-form-item>
        <el-form-item v-if="formData.autogetip==0" :label="$t('table.device_ip')" prop="device_ip">
          <el-input label="right" type="text" v-model="formData.ip"></el-input>
        </el-form-item>
        <el-form-item :label="$t('equipment.port')" prop="server_port">
          <el-input label="right" type="text" v-model="formData.server_port"></el-input>
        </el-form-item>
        <el-form-item v-if="formData.autogetip==0" :label="$t('equipment.subnet_ip')" prop="sm">
          <el-input label="right" type="text"  v-model="formData.netmask"></el-input>
        </el-form-item>
        <el-form-item v-if="formData.autogetip==0" :label="$t('equipment.gateway')" prop="gateway">
          <el-input label="right" type="text"  v-model="formData.gateway"></el-input>
        </el-form-item>
        <el-form-item v-if="formData.autogetip==0" :label="$t('equipment.dns')" prop="dns">
          <el-input label="right" type="text"  v-model="formData.dns1"></el-input>
        </el-form-item>
        <el-form-item v-if="formData.autogetip==0" :label="$t('equipment.dns_alter')" prop="dns_spare">
          <el-input label="right" type="text"  v-model="formData.dns2"></el-input>
        </el-form-item>
        <el-form-item align="right">
          <div>
            <el-button type="primary" size="small" @click="submitForm()">{{$t('table.complete')}}</el-button>
            <el-button size="small" @click="closeDia()">{{$t('table.cancel')}}</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 密码框 -->
    <el-dialog :title="$t('table.tip')" :visible.sync="lockDiaVIsible" width="30%">
      <span>{{$t('equipment.unlock_tip')}}</span>
      <el-input label="right" type="password" v-model="lockPasswork"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="lockDiaVIsible = false">{{$t('table.cancel')}}</el-button>
        <el-button type="primary" @click="submitLock">{{$t('table.complete')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
import store from "@/store";
import { getInfo, editInfo } from "@/api/equipment/equipment";

export default {
  props: ["row_id"],
  data() {
    // 自定义IP号校验规则
    let checkIP = (rule, value, cb) => {
      const regMobile = /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/;
      if (regMobile.test(value)) {
        //合法的IP
        return cb();
      }
      cb(new Error(this.$t("validation.format")));
    };
    // 设备名称长度校验
    let checkDeviceName = (rule, value, cb) => {
      var len = 0;
      for (var i = 0; i < value.length; i++) {
        if (value[i].match(/[^\x00-\xff]/gi) != null)
          //全角
          len += 2;
        //如果是全角，占用两个字节  如果mysql中某字段是text, 如果设置编码为utf-8,那么一个中文是占3个字节, gbk是两个字节
        else len += 1; //半角占用一个字节
      }
      if (len < 17) {
        //合法的IP
        return cb();
      }
      cb(new Error(this.$t("validation.v_device_name")));
    };
    return {
      dialogTableVisible: false,
      lockDiaVIsible: false,
      is_lock: true,
      lockPasswork: "",
      formData: {},
      fill_light_times: null,
      low_power_times: null,
      temp_display_type: null,
      open_door_option: [
        {
          value: 0,
          label: this.$t("equipment.type_face"),
        },
        // {
        //   value: 1,
        //   label: "身份证",
        // },
        // {
        //   value: 2,
        //   label: "工号",
        // },
        // {
        //   value: 3,
        //   label: "人脸",
        // },
        {
          value: 4,
          label: this.$t("equipment.type_face_card"),
        },
        // {
        //   value: 5,
        //   label: "人脸+工号（IC 卡）",
        // },
        {
          value: 6,
          label: this.$t("equipment.type_temp"),
        },
        {
          value: 7,
          label: this.$t("equipment.type_temperature"),
        },
        {
          value: 8,
          label: this.$t("equipment.type_stranger"),
        },
      ],
      rules: {
        sn: [
          {
            required: false,
            message: this.$t("validation.device_id"),
            trigger: "blur",
          },
        ],
        device_name: [
          {
            required: false,
            message: this.$t("validation.device_name"),
            trigger: "blur",
          },
          { validator: checkDeviceName, trigger: "blur" },
        ],
        open_door_continue_time: [
          {
            required: false,
            message: this.$t("validation.open_door_continue_time"),
            trigger: "blur",
          },
        ],
        camera_detect_type: [
          {
            required: false,
            message: this.$t("validation.camera_detect_type"),
            trigger: "change",
          },
        ],
        face_feature_pair_number: [
          {
            required: false,
            message: this.$t("validation.device_id"),
            trigger: "change",
          },
        ],
        open_door_type: [
          {
            required: false,
            message: this.$t("validation.open_door_type"),
            trigger: "change",
          },
        ],
        server_ip: [
          {
            required: true,
            message: this.$t("validation.server_ip"),
            trigger: "blur",
          },
          { validator: checkIP, trigger: "blur" },
        ],
        server_port: [
          {
            required: false,
            message: this.$t("validation.port"),
            trigger: "blur",
          },
        ],
        temp_range2: [
          {
            required: false,
            message: this.$t("validation.normal_temp"),
            trigger: "blur",
          },
        ],
        temp_range3: [
          {
            required: false,
            message: this.$t("validation.low_temp"),
            trigger: "blur",
          },
        ],
        device_defend_time: [
          {
            required: true,
            message: this.$t("validation.device_defend_time"),
            trigger: "blur",
          },
        ],
        // sm: [
        //   { required: false, message: "请输入子网掩码", trigger: "blur" },
        //   { validator: checkIP, trigger: "blur" },
        // ],
        // gateway: [
        //   { required: false, message: "请输入默认网关", trigger: "blur" },
        //   { validator: checkIP, trigger: "blur" },
        // ],
        // dns: [
        //   { required: false, message: "请输入首选DNS", trigger: "blur" },
        //   { validator: checkIP, trigger: "blur" },
        // ],
        // dns_spare: [
        //   { required: false, message: "请输入备选DNS", trigger: "blur" },
        //   { validator: checkIP, trigger: "blur" },
        // ],
      },
    };
  },
  watch: {
    temp_display_type: function (val, oldValue) {
      if (val == 0 && oldValue == 1) {
        this.formData.temp_range1 = this.switchHTemp(this.formData.temp_range1);
        this.formData.temp_range2 = this.switchHTemp(this.formData.temp_range2);
        this.formData.temp_range3 = this.switchHTemp(this.formData.temp_range3);
      }
      if (val == 1 && oldValue == 0) {
        this.formData.temp_range1 = this.switchCTemp(this.formData.temp_range1);
        this.formData.temp_range2 = this.switchCTemp(this.formData.temp_range2);
        this.formData.temp_range3 = this.switchCTemp(this.formData.temp_range3);
      }
    },
    fill_light_times: function (val, oldValue) {
      console.log("333333333");
      this.formData.fill_light_times = val[0] + "-" + val[1];
    },
    low_power_times: function (val, oldValue) {
      this.formData.low_power_times = val[0] + "-" + val[1];
    },
  },
  methods: {
    openEdit(row_id) {
      (this.dialogTableVisible = true),
        // 根据id获取数据信息
        console.log(row_id, "rerrrrrrrrrrrrrrrrrrrrrr");
      getInfo(store.getters.token, { sn: this.row_id }).then((res) => {
        // res.data.data.camera_detect_type = Number(
        //   res.data.data.camera_detect_type
        // );
        this.formData = res.data.data;
        this.temp_display_type = this.formData.temp_display_type;
        if (this.formData.temp_display_type == 1) {
          this.formData.temp_range1 = this.switchCTemp(
            this.formData.temp_range1
          );
          this.formData.temp_range2 = this.switchCTemp(
            this.formData.temp_range2
          );
          this.formData.temp_range3 = this.switchCTemp(
            this.formData.temp_range3
          );
        }
        this.formData.face_feature_pair_number = Number(
          this.formData.face_feature_pair_number
        );
        this.fill_light_times = this.formData.fill_light_times.split("-");
        this.low_power_times = this.formData.low_power_times.split("-");
        console.log(this.formData);
        this.listLoading = false;
      });
    },
    switchCTemp(ctemp) {
      return ((ctemp * 9) / 5 + 32).toFixed(2);
    },
    switchHTemp(htemp) {
      return ((5 / 9) * (htemp - 32)).toFixed(2);
    },
    submitForm() {
      this.formData.temp_display_type = this.temp_display_type;
      console.log("formData---------->", this.formData);
      if (this.formData.temp_display_type == 1) {
        this.formData.temp_range1 = this.switchHTemp(this.formData.temp_range1);
        this.formData.temp_range2 = this.switchHTemp(this.formData.temp_range2);
        this.formData.temp_range3 = this.switchHTemp(this.formData.temp_range3);
      }
      this.$refs.formData.validate((valid) => {
        if (!valid) {
          return;
        } else {
          // 修改
          editInfo(store.getters.token, this.formData).then((res) => {
            if (res.data.status) {
              this.$message.success(this.$t("table.edit_complete"));
              this.$emit("getList");
            } else if (res.data.msg == "更新据失败！") {
              this.closeDia();
            } else {
              this.$message.error(this.$t("table.edit_fail"));
            }
            this.closeDia();
          });
        }
      });
    },
    // 关闭弹窗
    closeDia() {
      this.lockPasswork = "";
      this.is_lock = true;
      this.dialogTableVisible = false;
    },
    // 打开密码弹窗
    openLockDia() {
      this.lockDiaVIsible = true;
    },
    // 提交密码
    submitLock() {
      if (this.lockPasswork == "12345678") {
        this.is_lock = false;
        this.lockDiaVIsible = false;
        this.$message.success(this.$t("equipment.unlock_tip1"));
      } else {
        this.$message.error(this.$t("equipment.unlock_tip2"));
        this.lockDiaVIsible = false;
      }
    },
  },
};
</script>

<style scoped>
</style>
